<template>
    <!-- <div>商品列表</div> -->
    <div class="goods-list">
    <div class="goods-item" v-for="item in goodslist" :key="item.id">
        <a href="#">
          <router-link :to="{
            name: 'goods_info',
            params: {
                id: item.id
            }
          }">
            <img :src="item.image">
            <h1 class="title">{{ item.name }}</h1>
            <p class="info">
                <span class="price">¥{{ item.price }}</span>
                <span class="sell">剩余 {{ item.num }} 件</span>
            </p>
          </router-link>
        </a>
    </div>
    <mt-button 
    class="more" 
    v-if="goodslist.length!== 0" 
    size="large" 
    @click="getMore">加载更多</mt-button>
</div>
  </template>
  <script>
  export default {
    data () {
      return {
        goodslist: [],
        last_id: 0
      }
    },
    props: ['category_id'],
    created () {
      this.getGoodsList()
    },
    methods: {
      getGoodsList () {
        // window.console.log(this.category_id)
          this.$indicator.open({
            text: '加载中'
          })
          let params = { last_id: this.last_id,category_id: this.category_id }
          this.$http.get('goodslist', { params: params }).then(res => {
            this.$indicator.close()
            // window.console.log(res.data)
            if (res.data.code === 1) {
            if (res.data.data.length > 0) {
              this.goodslist = this.goodslist.concat(res.data.data)
              this.last_id = res.data.data[res.data.data.length - 1].id
              } else if (this.goodslist.length > 0) {
              this.$toast('已经到达底部')
            } else {
              this.$toast('列表为空')
            }
          }
          })
      },
      getMore () {
          this.getGoodsList()
        }
    }
  }
  </script>
  <style lang="scss" scoped>
  .goods-list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
  
   .goods-item {
      width: calc(calc(100% / 2) - 10px);
      margin: 10px 10px 0 0;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 10px;
      padding: 10px;
  
        img {
          width: 100%;
        }
  
       .title {
          font-size: 14px;
          color: #333;
          margin: 10px 0;
        }
  
       .info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0;
  
           .price {
              color: red;
              font-weight: bold;
              font-size: 16px;
            }
  
           .sell {
              font-size: 13px;
            }
        }
      
    }
    .more {
          margin: 15px 0;
          font-size: 14px;
        }
  }

  </style>